<template>
  <view class="into" >
    <official-account></official-account>
    <view >
      <p class="title">星海屋</p>
    </view>
    <view class="midst">
      <image @click="start"  :class="[rotate?  'into-logo go' : ' into-logo aa' ]" src="@/static/logo.jpg"></image>
      <view class="info-word">
        <template>
          <span class="word">{{text}}</span>
        </template>
        <span class="guangbiao">|</span>
      </view>
      <button class="btn-box" @click="toIndex">
        进入
      </button>
    </view>
   
    <zero-loading class="loding" position="absolute"></zero-loading>
  </view>
</template>

<script>
import { nextTick } from "vue";
  export default {
    data() {
      return {
        rotate: false,
        text:'',
      };
    },
    onLoad() {
       let that = this
       that.typewrite(this,true)
    },
    methods:{
      toIndex(){
        wx.switchTab({
          url:'/pages/index/index'
        })
      },
      // 旋转
      start(){
        this.rotate = !this.rotate;
        console.log(this.rotate)
      },
      upData(e,x){
        return new Promise((res,rej)=>{
          setTimeout(function(){
            e.text = x
            res();
          },300)
        })
      },
       async typewrite(e,flag){
        let word ='不忘初心，方得始终!'
        if(flag)
       {
         for(let i = 1;i<=word.length;i++){
           await e.upData(e,word.slice(0,i))
         }
       }
        else{
          for(let i = word.length;i>=0;i--){
            await e.upData(e,word.slice(0,i))
          }
        }
        setTimeout(function(){e.typewrite(e,!flag)},2000)
      }
    }
  }
</script>

<style lang="scss" scoped>
.into{
  box-sizing: border-box;
  overflow: hidden;
  padding-top: 6vh;
  height: 100vh;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: #2980B9;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #FFFFFF, #44879d, #1d5e87);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #FFFFFF, #44879d, #1d5e87); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: relative;
.title{
  margin-bottom: 10px;
  font-size: 25px;
  text-align: center;
  background-image: -webkit-linear-gradient(0deg, #fff799,#ff274e, #fdff65, #4ff1ff);;
  -webkit-background-clip: text;
  color: transparent;
}
.midst{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  transform: translate(-50%,-50%); position: absolute; top:45%; left:50%;
}
.into-logo{
  width: 25vw; 
  height: 25vw;
  border-radius: 50%;
  border: 3px solid #5185a8;
   -webkit-animation: ani 2s linear infinite;
}
          .aa {
                transition: all 2s;
            }

            .go {
                transform: rotate(-360deg);
                transition: all 2s;
            }
@keyframes ani {
   0%{
        box-shadow: 0 0 3px #57f1ff
   }
   25%{
        box-shadow: 0 0 8px #57f1ff
   }
    50%{
        box-shadow: 0 0 20px #57f1ff
   }
   75%{
        box-shadow: 0 0 8px #57f1ff
   }
   100%{
    box-shadow: 0 0 3px #57f1ff
   }
}
.info-word{
  margin-top: 15vh;
  font-size: 18px;
  text-align: center;
  background-image: -webkit-linear-gradient(0deg, #e735fe,#1cff36, #fbff6a,#fff561, #80ff25);;
  -webkit-background-clip: text;
  color: transparent;
  .word{
    letter-spacing: 5px;
    font-style:italic;
    border-bottom: 1px solid #ed1eaf;
  }
  .guangbiao{
    color: #000;
    animation: flash 0.3s linear infinite;
  }
}
 .btn-box {
   margin-top: 10vh;
     background-color: transparent;
     border-radius: 12px;
     width: fit-content;
      overflow: hidden;
      border: 1px solid #efefef;
     box-shadow: #006496  -2px 5px 0px 0px;
    color: #FFFFFF;
    &:active {
     box-shadow: none;
     transform: translateY(5px);
     transition: 35ms cubic-bezier(.5, .7, .4, 1);
    }

  
 
 
}
@keyframes flash {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}
.loding{
  position: absolute;
  top:  85vh;
  left: 50%;
}
}
</style>
